<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <title>Kogito Example - Serverless Workflow - Events</title>
</head>
<body>

<div class="container">
    <div class="row">
        <h2 class="text-center">
            Applicant approval decisions
        </h2><br>
        <h5 class="text-center">Hint: Actually fill in the form. There is no error checking &#128540; </h5>
        <h5 class="text-center">Hint: Add salary greater than 3000 to get an approval decision &#128540; </h5>
        <div class="col-md-4 col-md-offset-1">
            <h3 class="text-center">Submit New Applicant</h3>
            <form id="newApplicantForm">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" name="name" id="name" placeholder="Name" class="form-control">
            </div>
            <div class="form-group">
                <label for="position">Position</label>
                <select name="position" id="position" class="form-control">
                    <option value="">--Select Position--</option>
                    <option value="Frontend Developer">Frontend Developer</option>
                    <option value="UI/UX Engineer">UI/UX Engineer</option>
                    <option value="iOS Engineer">iOS Engineer</option>
                    <option value="Android Developer">Android Developer</option>
                </select>
            </div>
            <div class="form-group">
                <label for="office">Office</label>
                <select name="office" id="office" class="form-control">
                    <option value="">--Select Office--</option>
                    <option value="Atlanta">Atlanta</option>
                    <option value="London">London</option>
                    <option value="Basel">Basel</option>
                    <option value="Berlin">Berlin</option>
                </select>
            </div>
            <div class="form-group">
                <label for="salary">Requested Salary</label>
                <input type="number" name="salary" id="salary" placeholder="Salary" class="form-control">
            </div>
            </form>
            <div class="form-group">
                <button class="btn btn-info" id="add">Submit</button>
            </div>
        </div>
        <div class="col-md-4 col-md-offset-1">
            <h3 class="text-center">Appplication Decision</h3>
            <div class="form-group">
                <table id="decisionstable" class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Position</th>
                        <th scope="col">Office</th>
                        <th scope="col">Salary</th>
                        <th scope="col">Decision</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="serializetojson.js"></script>
<script>
    var source = new EventSource("/decisions/stream");
    source.onmessage = function (event) {
        addToTable(event.data);
    };

    var t = $('#decisionstable').DataTable();
    var counter = 1;

    function addToTable(eventdata) {
       var eventobj = JSON.parse(eventdata);
       t.row.add( [
            counter,
            eventobj.data.name,
            eventobj.data.position,
            eventobj.data.office,
            eventobj.data.salary,
            eventobj.data.decision
        ] ).draw( false );

        counter++;
    }

    $("#add").on('click', function() {
        $.ajax({
            url: '/newapplicant',
            type : "POST",
            dataType : 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            data : JSON.stringify($("#newApplicantForm").serializeToJSON({parseFloat: { condition: "input[type='number']"}})),
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
</script>
</body>
</html>